<template>
    <view v-if="goods.goods_price" class="goods-detail"> 
        <u-swiper
        :list="goods.pics"
        keyName="pics_big"
        indicator
        indicatorMode="line"
        circular
        height="750rpx"
        @click="preview"
        >
        </u-swiper>
        <view class="goods-info" >
            <view class="goods-price" >￥{{goods.goods_price}}</view>
            <view class="goods-name u-line-2">{{goods.goods_name}}</view>
        </view>

        <view class="goods-introduce">
            <view class="goods-introduce-title">图文详情</view>
            <view class="goods-introduce-content">
                <rich-text :nodes="goods.goods_introduce"></rich-text>
            </view>
        </view>

        <view class="navigation"> 
            <view class="left">
                <view class="item">
                    <u-icon name="server-fill" :size="30" :color="$u.color['contentColor']"></u-icon>
                    <view class="text u-line-1">客服</view>
                </view>
                <navigator url="/pages/cart/cart" open-type="switchTab" class="item car" style="">
                    <view style="display: inline-block;position: absolute;top: 0;right: 0;">
                    <u-badge type="error" max="99" :value="cartNum" ></u-badge>
                    </view>
                    <u-icon name="shopping-cart" :size="30" :color="$u.color['contentColor']"></u-icon>
                    <view class="text u-line-1">购物车</view>
                </navigator>
            </view>
            <view class="right">
                <view class="cart btn u-line-1" @click="addCartt">加入购物车</view>
                <view class="buy btn u-line-1">立即购买</view>
            </view>
	    </view>
    </view>
</template>

<script>
export default {
    data(){
        return{
            goods:[]
        }
    },
    async onLoad({goods_id}){
        const {message}=await uni.$u.http.get("/goods/detail",{params:{goods_id}})
        this.goods=message
    },
    computed:{
        cartNum(){
            let num=0
            this.$store.state.cartList.forEach(item=>{
                num +=item.nums
            })
            return num
        }
    },
    methods:{
        preview(index){
            console.log(index);
            const urls=this.swiperList.pics.map(v=>v.pics_big)
            const current=urls[index]
            uni.previewImage({
                urls,current
            })
        },
        addCartt(){
            const cartList=this.$store.state.cartList
            console.log(cartList);
            const index=cartList.findIndex(item=>item.goods_id===this.goods.goods_id)
            if(index===-1){
                console.log("没有找到");
                cartList.push({...this.goods,checkbox:true,nums:1})
            }else{
                console.log("找到了");
                cartList[index].nums++
            }
            this.$store.commit("setCartList",cartList);
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-detail{
    padding-bottom: 102rpx;
    .goods-info{
        padding: 20rpx;
        border-bottom: 15rpx solid rgb(246, 244, 244);
        .goods-price{
            font-weight: 700;
            color:red;
            font-size: 26rpx;
            
        }
    }
    .goods-name{
        color: #666; 
    }
    .goods-introduce-title{
        text-align: center;
        padding: 20rpx;
        color: #666;
    }
}
.navigation {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 60rpx 0 40rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
            .text{
                margin-left: 10rpx;
            }
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
</style>